<template>
  <div class="sidebar">
    <p><a class="menuButton"
    @touchstart="move" @touchmove="move"
    :class="{boxTouch:isBoxTouch}" href="home">Home</a></p>
    <p><a class="menuButton"
    @touchstart="move" @touchmove="move"
    :class="{boxTouch:isBoxTouch}" href="about">About</a></p>
    <p><a class="menuButton"
    @touchstart="move" @touchmove="move"
    :class="{boxTouch:isBoxTouch}" href="contact">Contact Us</a></p>
    <p><a class="menuButton"
    @touchstart="move" @touchmove="move"
    :class="{boxTouch:isBoxTouch}" href="links">Links</a></p>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
interface Pos{
  x: number,
  y: number
}
@Options({ components: {} })
export default class MenuHighLight extends Vue {
  public rect: DOMRect|null = null;
  public isBoxTouch=false;

  public move(e: TouchEvent) {
    this.isBoxTouch = true;
  }
  public mounted() {
    this.rect =  (this.$el as HTMLElement).getBoundingClientRect();
    console.log(this.rect);
  }
}
</script>

<style lang="postcss" scoped>
.sidebar{
  touch-action: none;
  .menuButton {
    position: relative;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    text-align: left;
    background-color: grey;
    left: 5px;
    top: 5px;
    height: 26px;
    color: white;
    border-color: black;
    font-family: sans-serif;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 2px 2px 1px black;
    padding: 2px 4px;
    border: solid 1px black;
}
  .boxTouch{
      background-color:white;

      color:black;
      box-shadow: 2px 2px 1px black;
  }

  .menuButton:hover {
    /* position: relative;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out; */
    background-color:white;
    color:black;
    box-shadow: 2px 2px 1px black;
  }
}
</style>
